<template>
  <div class="mydetail">
    <el-card>
      <div class="myprint">
        <i class="el-icon-printer" @click="printBtn"></i>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane name="first" label="登录账户设置" class="mycard">
          <el-form
            :data="formData"
            label-width="60px"
            style="width: 400px"
            :rules="rules"
          >
            <el-form-item label="姓名:" prop="username">
              <el-input v-model="formData.username"></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="password">
              <el-input type="password" v-model="formData.password"></el-input>
            </el-form-item>
            <el-button type="primary" class="btn" @click="submit"
              >更新</el-button
            >
          </el-form>
        </el-tab-pane>
        <el-tab-pane name="sconed" label="个人详情">
          <userInfo></userInfo>
        </el-tab-pane>
        <el-tab-pane name="third" label="岗位信息"></el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import userInfo from '../components/user-info.vue'
import { getEmployeesApi, saveUserInfoApi } from '../../../api/employees'
export default {
  components: {
    userInfo
  },
  data () {
    return {
      activeName: 'first',
      id: this.$route.params.id,
      info: {},
      formData: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
          { min: 1, max: 6, message: '姓名长度为1-4位', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 16, message: '密码长度为6-16位', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    printBtn () {
      this.$router.push(`/employees/print/${this.id}?type=${this.activeName}`)
    },
    async getEmployees () {
      const res = await getEmployeesApi(this.id)
      this.info = res
      console.log(res)
      this.formData.username = res.username
    },
    async submit () {
      try {
        await saveUserInfoApi({ ...this.info, ...this.formData })
        this.$message.success('用户信息更改成功')
        this.formData.password = ''
        this.$router.push('/employees')
      } catch (error) {
        this.$message.error({ message: error.message })
      }
    }
  },
  created () {
    this.getEmployees()
  }
}
</script>

<style lang="scss" scoped>
.mydetail {
  padding: 20px 20px;
  .myprint {
    position: relative;
    i {
      position: absolute;
      right: 10px;
      top: 60px;
      font-size: 30px;
      z-index: 999;
    }
    &:hover i {
      cursor: pointer;
    }
  }
  .mycard {
    margin-left: 400px;
    margin-top: 40px;
    margin-bottom: 40px;
    .btn {
      margin-left: 190px;
    }
  }
  .demo-form-inline {
  }
}
</style>
